<!--
 * @Author: 刘佳欢 2173558681@qq.com
 * @Date: 2025-09-11 08:41:16
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-17 09:57:16
 * @FilePath: \大三课程\city\src\pages\components\Bottom4.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 150px;"></div>
    </div>
</template>
<script>
import { get } from '@/utils/request';
import { Bar } from '@antv/g2plot';

export default {
    data() {
        return {
            title: '监测视频',
            // 存放湿度数据
            monData: [],
        }
    },
    methods: {
        loadLine() {

            const data = [
                { type: '山西农大主体育场工程', value: 1 },
                { type: '太原理工大学一号教学楼工程', value: 2 },
                { type: '中北大学', value: 0 },
                { type: '兰州理工大学', value: 2 },  

            ];

            const bar = new Bar(this.$refs.bottom4,  {
                data,
                xField: 'value',
                yField: 'type',
                seriesField: 'type',
                legend: {
                    position: 'top-left',
                },
            });

            bar.render();
        }

    },
    mounted() {
        this.loadLine()
    }

}
</script>
<style lang="less" scoped></style>